<!DOCTYPE html>
<!-- saved from url=(0062)https://www.17sucai.com/preview/714616/2018-06-11/wj/demo.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>家庭财务状况</title>

    {% load static %}
    <link href="{% static 'taa/style.css' %}" rel="stylesheet" type="text/css">


</head>
<body style="">
<main class="cmp640 ">

    {% csrf_token %}
    <input type="hidden" value="{{ rowkey }}" name="rowkey"/>
    <div class="wrap">

        <h1>家庭财务状况及配置建议</h1>

        <h4 style="margin-top: 20px">目前财务分配比例</h4>
        <div id="Pie1" style="width: 100%;height:400px;margin-top: 20px"></div>
        <h4 style="margin-top: 20px">您的风险等级为：{{ investType}}</h4>
        <h4 style="margin-bottom: 20px">建议您按如下表格进行财务配置调整</h4>
        <table  class="pure-table pure-table-bordered">
            <thead>
            <tr>
                <th>资产类别</th>
                <th>实际数据</th>
                <th>理想配置比例</th>
                <th>应调整比例</th>
            </tr>
            <thead>
        <tbody>
            {% for a, b, c, d in zipped_list %}
            <tr>
                <td>{{ a }} </td>
                <td>{{ b }}%</td>
                <td>{{ c }}%</td>
                <td>{{ d }}%</td>
            </tr>
            {% endfor %}
        </tbody>
        </table>
        <div id="barSimple" style="width: 100%;height:400px;"></div>
        <h6 style="margin-bottom: 20px">资产类别对应投资标的：</h6>
        <table  class="pure-table pure-table-bordered" style="margin: auto">
            <thead>
            <tr>
                <th>资产类别</th>
                <th>投资标的</th>
            </tr>
            <thead>
        <tbody>
           <tr >
               <td rowspan="4" style="vertical-align: middle;">无风险收益</td>
               <td>银行存款</td>
           </tr>
           <tr>
               <td>货币性基金</td>
           </tr>
              <tr>
               <td>保险</td>
           </tr>
              <tr>
               <td>国债</td>
           </tr>
            <tr >
               <td rowspan="3" style="vertical-align: middle;">低风险收益</td>
               <td>银行理财产品</td>
           </tr>
           <tr>
               <td>信托产品</td>
           </tr>
          <tr>
                <td>债券型基金及相关产品</td>
          </tr>
           <tr >
               <td rowspan="3" style="vertical-align: middle;">中风险收益</td>
               <td>配置型基金及相关产品</td>
           </tr>
           <tr>
               <td>股票型基金及相关产品</td>
           </tr>
          <tr><td>黄金</td>
          </tr>
          <tr >
               <td rowspan="4" style="vertical-align: middle;">高风险收益</td>
               <td>股票</td>
           </tr>
           <tr>
               <td>期货</td>
           </tr>
          <tr><td>外汇</td>
          </tr>
        <tr>
            <td>收藏及其他</td>
        </tr>
        </tbody>
        </table>

    </div><!--end wrap-->


    <div class="hang80"></div>

</main>
<!-- All JS -->
<script type="text/javascript" src="../../static/taa/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="../../static/taa/echarts.min.js"></script>
<script>
        var myChart = echarts.init(document.getElementById('Pie1'));
        option1 = {

            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                top: 'top',
                left: 'left',
                data: {{ legend|safe }}
            },
            series: [
                {
                    name: '金融资产',
                    label: {
                        formatter: '{b}:{d}%'
                    },
                    type: 'pie',
//                    roseType: 'area',
                    radius: '65%',
//                    radius: ['30%', '45%'],
                    center: ['50%', '50%'],
                    data: {{ series|safe }},

                }
            ]
        };

        myChart.setOption(option1)


        var myCharts = echarts.init(document.getElementById('barSimple'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },
//                formatter: "{a}%"

            },

            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                axisLine: { //y轴
                    lineStyle: {
                        color: '#cccccc' //更改坐标轴颜色
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#9B9B9B', //更改坐标轴文字颜色
                        fontSize: 10 //更改坐标轴文字大小
                    },
                    interval: 0
                },
                data: ["无风险收益", "低风险收益", "中等风险收益", "高风险收益"]
            },
            legend: {
                data: ["实际数据", "理想配置比例", "应调整比例"]
            },
            yAxis: {
                type: 'value',

                axisLabel: {
                    textStyle: {
                        color: '#9B9B9B', //更改坐标轴文字颜色
                        fontSize: 10 //更改坐标轴文字大小
                    },
                    formatter: '{value}%'
                }
            },
            series: [ {
                name: '实际数据',
                label: {
                    show: true,
                    formatter: '{@2012}%',
                    position: 'top'
                },
                type: 'bar',
                data: {{ bardata }}
            },
                {
                    name: "理想配置比例",
                        label: {
                    show: true,
                        formatter: '{@2012}%',
                        position: 'top'
                },
                    type: 'bar',
                    data: [10,30,30,30]
                },
                {
                    name: '应调整比例',
                        label: {
                    show: true,
                        formatter: '{@2012}%',
                        position: 'top'
                },
                    type: 'bar',
                    stack: '广告',
                    data: {{ bardata2 }}
                }
                ]
        };
        myCharts.setOption(option)

</script>


</body>
</html>